<!DOCTYPE html>
<html>
<head>
    <title>直接测试</title>
</head>
<body>
    <h1>直接测试复制和图片显示</h1>
    
    <h2>1. 测试复制功能</h2>
    <button onclick="directCopy()">直接复制测试</button>
    <p id="copyResult"></p>
    
    <h2>2. 模拟图片生成结果</h2>
    <button onclick="simulateImageResponse()">模拟图片生成</button>
    <div id="imageResult"></div>

    <script>
        // 直接复制测试
        function directCopy() {
            const testUrl = "https://example.com/test.jpg";
            console.log('开始直接复制测试:', testUrl);
            
            const textArea = document.createElement('textarea');
            textArea.value = testUrl;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            
            try {
                textArea.focus();
                textArea.select();
                const success = document.execCommand('copy');
                
                document.getElementById('copyResult').innerHTML = success ? 
                    '<span style="color: green;">✅ 复制成功！请尝试粘贴验证</span>' : 
                    '<span style="color: red;">❌ 复制失败</span>';
                    
                console.log('复制结果:', success);
            } catch (e) {
                document.getElementById('copyResult').innerHTML = 
                    '<span style="color: red;">❌ 复制异常: ' + e.message + '</span>';
                console.error('复制异常:', e);
            } finally {
                document.body.removeChild(textArea);
            }
        }
        
        // 模拟图片生成响应
        function simulateImageResponse() {
            const testUrl = "https://example.com/generated-image.jpg";
            const imageId = 'img_test_' + Date.now();
            
            const html = `
                <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0; border: 1px solid #e9ecef;">
                    <div style="text-align: center; margin-bottom: 15px;">
                        <div>🔄 正在加载图片预览...</div>
                        <img id="${imageId}" 
                             style="max-width: 100%; max-height: 400px; border-radius: 6px; display: none;" 
                             src="${testUrl}"
                             onload="this.previousElementSibling.style.display='none'; this.style.display='block';"
                             onerror="this.previousElementSibling.textContent='⚠️ 图片加载失败'; this.style.display='none';"
                             alt="测试图片" />
                    </div>
                    
                    <div style="text-align: center; margin-top: 15px;">
                        <button onclick="testCopyFromButton('${testUrl}')" 
                                style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin: 0 4px; cursor: pointer;">
                            📋 复制链接
                        </button>
                        <button onclick="window.open('${testUrl}', '_blank')" 
                                style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin: 0 4px; cursor: pointer;">
                            👁️ 新窗口查看
                        </button>
                    </div>
                    
                    <details style="margin-top: 15px;">
                        <summary style="cursor: pointer; color: #6c757d;">🔗 查看原始链接</summary>
                        <div style="margin-top: 8px; padding: 8px; background: white; border-radius: 4px;">
                            <code style="word-break: break-all; font-size: 11px;">${testUrl}</code>
                        </div>
                    </details>
                </div>
            `;
            
            document.getElementById('imageResult').innerHTML = html;
        }
        
        // 从按钮测试复制
        function testCopyFromButton(url) {
            console.log('从按钮复制:', url);
            
            const textArea = document.createElement('textarea');
            textArea.value = url;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            
            try {
                textArea.focus();
                textArea.select();
                const success = document.execCommand('copy');
                
                if (success) {
                    alert('✅ 复制成功！链接已复制到剪贴板');
                } else {
                    alert('❌ 复制失败，请手动复制链接');
                }
            } catch (e) {
                alert('❌ 复制异常: ' + e.message);
            } finally {
                document.body.removeChild(textArea);
            }
        }
    </script>
</body>
</html>